<template>
  <van-popup position="top" :style="{ height: '70%' }" round v-model="show" :close-on-click-overlay="false">
    <div class="container">
      <div class="main">
        <van-form>
          <van-field label="预约时间:">
            <template #input>
              <div style="width: 100%;">
                <SelectTimeList @checkTimeList="checkTimeList" :listDate="[search.btime, search.etime]" />
              </div>
            </template>
          </van-field>
          <van-field readonly clickable label="预约状态：" :value="statusText" placeholder="状态" @click="openStatusPicker">
            <template #right-icon>
              <van-icon style="margin-left: 10px;" name="arrow-down" />
            </template>
          </van-field>
          <van-field label="预约类型:">
            <template #input>
              <van-radio-group v-model="search.cus_type" direction="horizontal">
                <van-radio :name="0">全部</van-radio>
                <van-radio :name="1">新客</van-radio>
                <van-radio :name="2">老客</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field v-model="search.search_content" placeholder="请输入....." clearable>
            <template #label>
              <span @click="openKeyTypePicker">
                {{keyWordType.filter(ite => ite.id ==
                  search.keyword_type)[0]?.text}}<van-icon style="margin-left: 10px;" name="arrow-down" />
              </span>
            </template>
          </van-field>
          <van-field readonly clickable label="预约门店：" :value="shopText" placeholder="" @click="openShopPicker">
            <template #right-icon>
              <van-icon style="margin-left: 10px;" name="arrow-down" />
            </template>
          </van-field>
          <!-- {{shopList}} -->
        </van-form>
      </div>
      <div class="footer">
        <van-button size="small" type="default" @click="show = false">取消</van-button>
        <van-button size="small" type="info" @click="confirm">确认</van-button>
      </div>
    </div>
    <PopPickerSelectSearch ref="shopListRef" placeholder="选搜索门店" :list="shopList"
      @onConfirmShopList="onConfirmShopList" />
    <PopPickerSelectSearch ref="keyTypeRef" placeholder="选择关键字" :list="keyWordType"
      @onConfirmShopList="onConfirmKeyType" />
    <PopPickerSelectSearch ref="statusPickerRef" placeholder="选择状态" :list="statusData"
      @onConfirmShopList="onConfirmStatus" />
  </van-popup>
</template>

<script>
import PopPickerSelectSearch from "@/views/mobile/storeReportForm/popPickerSelectSearch.vue";
import SelectTimeList from "@/components/selectTimeList.vue";
export default {
  components: {
    SelectTimeList,
    PopPickerSelectSearch
  },
  props: ['bizRefData'],
  data() {
    return {
      show: false,
      search: {
        btime: "",
        etime: ""
      },
      statusData: [
        { text: "待服务", id: 1 },
        { text: "已开单", id: 2 },
        { text: "已流失", id: 7 },
        { text: "流失中", id: 6 }
      ],
      keyWordType: [
        { text: "手机号", id: 1 },
        { text: "微信号", id: 2 },
        { text: "名称", id: 3 },
        { text: "会员号", id: 4 }
      ],
      statusText: '', shopText: ''
    };
  },
  computed: {
    shopList() {
      return this.bizRefData?.shop_childs?.map(item => ({
        text: item.dept_name,
        id: item.dept_id
      }));
    }
  },
  created() { },
  mouted() { },
  methods: {
    open() {
      this.show = true;
    },
    setData(data) {
      this.search = data;
      this.statusText = this.statusData.filter(ite => ite.id ==
        this.search.status)[0]?.text
    },
    checkTimeList(timeList) {
      this.search.btime = timeList[0];
      this.search.etime = timeList[1];
    },
    openStatusPicker() {
      this.$refs.statusPickerRef.open();
      this.$nextTick(() => {
        const selectedIndex = this.statusData.findIndex(
          item => item.id == this.search.status
        );
        this.$refs.statusPickerRef.setIndex(selectedIndex);
      });
    },

    onConfirmStatus(data) {
      this.search.status = data.id;
      this.statusText = data.text;
    },
    openKeyTypePicker() {
      this.$refs.keyTypeRef.open();
      this.$nextTick(() => {
        const selectedIndex = this.keyWordType.findIndex(
          item => item.id == this.search.keyword_type
        );
        this.$refs.keyTypeRef.setIndex(selectedIndex);
      });
    },
    onConfirmKeyType(data) {
      this.search.keyword_type = data.id;
    },
    openShopPicker() {
      console.log(' this.shopList', this.shopList);

      this.$refs.shopListRef.open();
      this.$nextTick(() => {
        const selectedIndex = this.shopList.findIndex(
          item => item.id == this.search.dept_id
        );
        this.$refs.shopListRef.setIndex(selectedIndex);
      });
    },
    onConfirmShopList(data) {
      this.search.dept_id = data.id;
      this.shopText = data.text
    },
    confirm() {
      this.$emit("resetSearch", this.search);
      this.show = false;
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  // padding: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .main {
    flex: 1;
  }

  .footer {
    height: 50px;
    display: flex;
    padding: 0px 16px;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
